/**
 * 直播参数模块
 * @author xiaoxujs
 */

import { Button, message } from "antd";
import { CardHtmlBox, WuliaomingchengBox } from "../../style";
import { FC, useCallback, useEffect, useState } from "react";
import { getTlplTLaneQueryRTSPParam } from "./api";
import SetZBModule from "./SetZBModule";

const LiveModule:FC<{
    laneId?: string;
}> = ({
    laneId
}) => {
        const [setZBShow, setSetZBShow] = useState(false); // 设置 直播参数设置弹窗
        /**
         * 设置直播参数
         */
        const [liveParameters, setLiveParameters] = useState<string>('--'); //直播参数
        // 直播数据
        const liveParametersFun = useCallback(async () => {
            
            if (laneId) {
                const { code, msg, data } = await getTlplTLaneQueryRTSPParam({ laneId: laneId }) as { code: number, msg: string, data: string };
                if (code === 20000) {
                    setLiveParameters(data);
                } else {
                    message.error(msg);
                }
            }
        }, [laneId])
        useEffect(() => {
            liveParametersFun();
        }, [liveParametersFun])
        // 设置直播参数回调
        const handleSetCallback = () => {
            setSetZBShow(false);
            liveParametersFun();
        }
    return  <CardHtmlBox>
        <div className="box-top">
            <div className="box-top-title">直播参数</div>
            <Button type="link" onClick={() => setSetZBShow(true)}>设置参数</Button>
        </div>
        <WuliaomingchengBox>
            <span className="zcz-xia-item-title">RTSP地址</span>
            <span className="zcz-xia-item-value">{liveParameters && (liveParameters || '--')}</span>
        </WuliaomingchengBox>
        {/* 设置直播参数 */}
        <SetZBModule
            open={setZBShow}
            handleSetPlcCallback={handleSetCallback}
            clickData={liveParameters}
            laneId = {laneId}
        />
    </CardHtmlBox>
}

export default LiveModule;
